<template>
  <div style="height: 100%">
  <el-container class="home-container">
    <el-header style="height: 50px">
      <div >
        <img src="../../assets/img/logo.png">
        <span style="color: #373d41;">超级管理员 hi，{{thisUser.user_name}}!</span>
      </div>
      <el-button type="info" @click="logout">安全退出</el-button>
    </el-header>
    <el-container style="height: 100%;">
      <el-aside :width="isCollapse?'68px':'170px'" style="text-align: center">
        <div class="toggle-button" @click="toggleCollapse"><i class="el-icon-s-unfold"></i></div>
        <img id="img" @click="changeDialog=true"  style="cursor: pointer;" :src="this.realImg">
        <el-menu
            :default-active="nowPath"
            :router="true"
            unique-opened :collapse=isCollapse
            background-color="#001529"
            text-color="#FFFFFF"
            active-text-color="#ffd04b">
          <!--一级菜单-->
          <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
            <template #title>
              <i :class="item.icon"></i>
              <span>{{item.title}}</span>
            </template>
            <!--二级菜单-->
            <el-menu-item :index="it.path" v-for=" it in item.subMenuList" :key="it.id" @click="choice(it.path)">
              <template #title>
                <i :class="it.icon"></i>
                <span>{{it.title}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main style="overflow-y: hidden">
        <el-dialog :visible.sync="changeDialog" title="头像修改" width="20%" >
          <div style="border:1px dashed #000;border-radius: 2px ; width: 185px;margin-left: 40px">
            <el-upload
                name="picFile"
                class="avatar-uploader"
                :action="this.action"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-dialog>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
  </div>
</template>

<script>
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}

export default {
  name: "AdminIndex",
  created() {
    this.getMenuList();
    //设置当前被选中的
    this.nowPath=window.sessionStorage.getItem("nowPath")
  },
  data(){
    return{
      realImg:'',
      action:'',
      imageUrl: '',
      loading: false,
      changeDialog:false,
      thisUser:{},
      menuList:[],
      isCollapse:true,
      nowPath:"/welcome",
      kind:0
    }
  },
  methods:{
    logout(){
      window.sessionStorage.clear();//清除session
      this.$router.push({path:"/Index"})//回到首页
    },
    async getMenuList(){
      this.thisUser=JSON.parse(window.sessionStorage.getItem("user"))
      this.action="http://localhost:9001/up?user_id="+this.thisUser.user_id;
      this.realImg="http://localhost:9001/getImage/"+this.thisUser.user_id+".jpg"
      const {data:res} =await this.$http.get("/menus?kind="+this.kind)
      if(res.flag!=200) return this.$message.error("失败~")
      this.menuList=res.menus
      console.log(res.menus)
    },
    //控制收缩
    toggleCollapse(){
      this.isCollapse=!this.isCollapse;
    },
    choice(nowPath){
      //存放在session域中
        window.sessionStorage.setItem("nowPath",nowPath)
        this.nowPath=nowPath;
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.changeDialog=false
      this.$message.success("图像修改成功！")
      this.$router.go(0)
    },
    async beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.changeDialog = false
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.changeDialog = false
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  },

}
</script>

<style scoped>
#img{
  margin-top: 10px;
  width: 60px;
  height:60px;
  border-radius: 50%;
}


.el-header {
  background-color: #FFFFFF;
  display: flex;
  /*左右贴边*/
  justify-content: space-between;
  /*左边界*/
  padding-left: 0%;
  /*水平*/
  align-items: center;
  color: #fff;
  font-size: 20px;
  /*左侧div加布局*/

}
.el-header div {
  display: flex;
  align-items: center;
}
span {
  margin-left: 15px;
}
.el-aside {
  background-color: #001529;
  transition-duration :0.75s;
}

.el-menu{
  border-right: none;
}
.el-aside .el-menu{
  border-right: none;
}
.el-main {
  background-color: #eaedf1;
}
.home-container {
  min-height: 100%;
}
img{
  margin-left:2px ;
  width: 60px;
  height: 45px;
}
.toggle-button{
  background-color: #001529;
  font-size: 20px;
  line-height: 30px;
  color: white;
  line-height: 24px;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}





.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>